import {Card, Image, Typography} from "antd";

export default ({data}:{data:Record<string, any>}) => {
  return (
    <a href={'/news/product/' + data.id} target='_blank' rel='noopener noreferrer' title={data.name}>
      <Card
        size="small"
        hoverable
        styles={{
          body: {
            display: 'flex',
            alignItems: 'center', // 垂直居中
            height: '100%',
          },
        }}
      >
        <Image
          preview={false}
          style={{ height: 40, width: 40, flexShrink: 0 }}
          src={data.image}
        />
        <div
          style={{
            marginLeft: 8,
            display: 'flex',
            flexDirection: 'column',
            justifyContent: 'center',
            minWidth: 0, // 关键：flex 布局下必须加这个
            flex: 1,     // 占满剩余空间
          }}
        >
          <strong style={{ color: 'rgb(40,42,45)', fontWeight: 700 }}>{data.name}</strong>
          <div
            style={{
              color: '#6c757d',
              fontSize: 12,
              overflow: 'hidden',
              textOverflow: 'ellipsis',
              whiteSpace: 'nowrap',
            }}
          >
            {data.memo}
          </div>
        </div>
      </Card>
    </a>

  )
}
